<!-- 分类管理 -->
<template>
  <div class="outer">
    <h5>分类管理</h5>
    <div class="main">
      <avue-crud
        :data="listData"
        :option="listOption"
        @row-update="listUpdate"
        @row-del="listDel"
        @row-save="addList"
      ></avue-crud>
    </div>
  </div>
</template>

<script>
import { getListData, updateList, addList, delList } from "@/api/api";

export default {
  components: {},
  props: {},
  data() {
    return {
      listData: [],
      listOption: {
        column: [
          {
            label: "id",
            prop: "id",
            hide: true,
            display: false,
          },
          {
            label: "名称",
            prop: "name",
          },
          {
            label: "排序",
            prop: "sort",
          },
        ],
      },
      listPage: {
        currentPage: 1,
        pageSize: 10,
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    /**
     * 获取分类列表
     */
    onLoad() {
      getListData()
        .then((result) => {
          if (result.data.code == 1 && result.data.data.length != -1) {
            this.listData = result.data.data;
          }
        })
        .catch((err) => {
          this.$message({
            message: "获取失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
    },

    /**
     * 更新编辑数据
     * @param {Object} form 表单内容
     * @param {Number} index 表单数据
     * @param {Function} done 执行方法
     * @param {*} loading
     */
    listUpdate(form, index, done, loading) {
      updateList({ name: form.name, sort: form.sort, id: form.id })
        .then((result) => {
          if (result.data.code == 1) {
            this.$message({
              message: "编辑成功",
              type: "success",
            });
            this.onLoad();
          }
        })
        .catch((err) => {
          this.$message({
            message: "编辑失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
      done();
    },

    /**
     * 删除数据
     * @param {Object} form 表单内容
     * @param {Number} index 表单顺序
     */
    listDel(form, index) {
      delList({ id: form.id })
        .then((result) => {
          if (result.data.code == 1) {
            this.$message({
              message: "删除成功！",
              type: "success",
            });
            this.onLoad();
          }
        })
        .catch((err) => {
          this.$message({
            message: "该分类下有商品，故删除失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
    },

    /**
     * 新增分类数据
     * @param {Object} form 新增的数据
     * @param {Function} done 完成方法
     * @param {*} loading
     */
    addList(form, done, loading) {
      addList({ name: form.name, sort: form.sort })
        .then((result) => {
          if (result.data.code == 1) {
            this.$message({
              message: "新增成功！",
              type: "success",
            });
            this.onLoad();
          }
        })
        .catch((err) => {
          this.$message({
            message: "新增失败！",
            type: "error",
          });
          console.log("报错信息", err);
        });
      done();
    },
  },
  created() {},
  mounted() {
    this.onLoad();
  },
};
</script>
<style lang="scss" scoped>
.outer {
  padding: 20px;

  h5 {
    margin: 20px;
  }
}
</style>